import React from "react";
import {withRouter,} from 'react-router-dom'
import {Icon} from "antd-mobile";
import ruleSrc from "../../res/images/web/together/rule@2x.png";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import LocalStorageService from "../../utils/LocalStorageService";
import {getMyFuliRecordReq} from "../../apis/goApis";
import BasicThead from "../../shared-components/Tables/BasicThead/BasicThead";
import moment from "moment";
import './my-fuli-record.css'
import {log} from "../../utils/commonfunc";

class MyFuliRecord extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            sell: [],
            change: [],
            index: 0,
            p1: 0,
            p2: 0,
            end1: false,
            end2: false,
            start1: 0,
            start2: 0,
            tableHeadSell: [
                {title: '时间',},
                {title: '碎片',},
                {title: '数量',},
                {title: '金额',},
            ],
            tableHeadChange: [
                {title: '时间',},
                {title: '碎片',},
                {title: '金额',},
            ],
        }
    }

    componentDidMount() {
        this.getList()
    }

    getList = () => {
        const index = this.state.index
        const Flag = index
        const P = index === 0 ? this.state.p1 : this.state.p2
        const Uid = this.uid
        const keys = ['sell', 'change',]
        const ends = ['end1', 'end2',]
        const key = keys[this.state.index]
        let end = index === 0 ? this.state.end1 : this.state.end2
        if (end === false) {
            getMyFuliRecordReq({
                Flag,
                P,
                Uid,
            }).then(res => {
                const list = res.data.ok
                if (list.length < 10) {
                    end = true
                }
                this.setState({
                    [key]: [...this.state[key], ...list,],
                    [ends[index]]: end,
                })
            })
        }
    }

    onTabChange = (index) => {
        const emptyKeys = ['sell', 'change',]
        const ends = ['end1', 'end2']
        const ps = ['p1', 'p2']
        const emptyKey = emptyKeys[index]
        this.setState({
            index: index,
            [ps[index]]: 0,
            [emptyKey]: [],
            [ends[index]]: false,
        }, () => this.getList())
    }

    onTouchState = (event) => {
        const start = event.touches[0].screenY
        const starts = ['start1', 'start2',]
        const index = this.state.index
        this.setState({
            [starts[index]]: start,
        })
    }

    onTouchEnd = (event) => {
        const starts = ['start1', 'start2',]
        const ps = ['p1', 'p2']
        const index = this.state.index
        const end = event.changedTouches[0].screenY
        const start = this.state[starts[index]]
        const diff = end - start
        if (diff < 0) {
            this.setState({
                [ps[index]]: this.state[ps[index]] + 1,
            }, () => this.getList())
        }
        this.setState({
            [starts[index]]: 0,
        })
    }

    render() {
        const sell = this.state.sell
        const change = this.state.change
        const loadSpan = <span className='bottom-span'>加载中</span>
        const noSpan = <span className='bottom-span'>无更多数据</span>
        const endSpan = <span className='bottom-span'>无更多数据</span>
        const moreSpan = <span className='bottom-span'>下滑加载更多数据</span>
        const sellList = <div
            onTouchStart={(e) => this.onTouchState(e)}
            onTouchEnd={(e) => this.onTouchEnd(e)}
        >
            <div style={{padding: '12px 16px',}} className='flex-space-between-align-center'>
                {this.state.tableHeadSell.map((name, index) => <span className='gray-text' key={index}>{name.title}</span>)}
            </div>
            {sell.map((item, index) => <div key={index} style={{width: '100%', background: '#fff', marginBottom: '1px', height: '44px', padding: '0 16px',}} className='flex-space-between-align-center'>
                <span className='flex-1'>{moment(item.Createt * 1000).format('YYYY/MM/DD')}</span>
                <span className='flex-1 text-align-center'>{item.Quota}元劵{item.Number}号碎片</span>
                <span className='flex-1 text-align-center'>{item.Count}</span>
                <span className='flex-1 text-align-right'>{item.Salecoin}</span>
            </div>)}
            {
                this.state.p1 !== 0
                    ? this.state.end1 ? endSpan : moreSpan
                    : this.state.end1
                        ? sell.length === 0
                            ? noSpan
                            : endSpan
                        : sell.length === 0
                            ? loadSpan
                            : moreSpan
            }
        </div>
        const changeList = <div
            onTouchStart={(e) => this.onTouchState(e)}
            onTouchEnd={(e) => this.onTouchEnd(e)}
        >
            <div style={{padding: '12px 16px',}} className='flex-space-between-align-center'>
                {this.state.tableHeadChange.map((name, index) => <span className='gray-text' key={index}>{name.title}</span>)}
            </div>
            {change.map((item, index) => <div key={index} style={{width: '100%', background: '#fff', marginBottom: '1px', height: '44px', padding: '0 16px',}} className='flex-space-between-align-center'>
                <span className='flex-1'>{moment(item.Createt * 1000).format('YYYY/MM/DD')}</span>
                <span className='flex-1 text-align-center'>{item.Quota}元劵</span>
                <span className='flex-1 text-align-right' style={{color: ['#FFA500', '#333333', 'rgba(51, 51, 51, 0.4)',][item.State]}}>{['待审核', '成功', '失败',][item.State]}</span>
            </div>)}
            {
                this.state.p2 !== 0
                    ? this.state.end2 ? endSpan : moreSpan
                    : this.state.end2
                    ? change.length === 0
                        ? noSpan
                        : endSpan
                    : change.length === 0
                        ? loadSpan
                        : moreSpan
            }
        </div>
        return <>
            <Icon type='left' size="lg" onClick={() => this.props.history.goBack()} color='#333' style={{position: 'absolute', top: 4, left: '', zIndex: 100,}}/>
            <TabWithCustomUnderline
                tabs={[
                    {title: '出售',},
                    {title: '兑换',},
                ]}
                tabBarUnderlineStyle={{
                    width: '40%',
                    borderRadius: '0',
                    background: '#36C8B9',
                }}
                prefixCls='width-50-tab'
                tabBarBackgroundColor='#ffffff'
                onChange={(e, i) => this.onTabChange(i)}
            >
                {sellList}
                {changeList}
            </TabWithCustomUnderline>
        </>
    }
}

export default withRouter(MyFuliRecord)